<template>
  <div class="home">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="imgs in imgList" :key="imgs.id">
        <img :src="imgs.img" alt />
      </van-swipe-item>
    </van-swipe>

    <van-grid :column-num="3" class="my-grid">
      <van-grid-item v-for="grid in gridsList" :key="grid.id" :icon="grid.src" :text="grid.title" />
    </van-grid>
  </div>
</template>
<script>
export default {
  data: () => ({
    imgList: [],
    gridsList: []
  }),
  created() {
    this.getImgs()
    this.getGrids()
  },
  methods: {
    async getImgs() {
      try {
        const { data: { message } } = await this.$axios.get('/api/getlunbo')
        this.imgList = message
      } catch (error) {
        this.$Toast('异常')
      }
    },
    async getGrids() {
      try {
        const { data: { message } } = await this.$axios.get('/api/grids')
        this.gridsList = message
        this.$Toast('成功')
      } catch (error) {
        this.$Toast('异常')
      }
    }
  }
}
</script>
<style lang="less">
.my-swipe .van-swipe-item {
  text-align: center;
  height: 200px;
  img {
    width: 100%;
  }
}
.my-grid .van-grid-item {
  i {
    font-size: 50px;
  }
}
</style>
